<!-- 我的 -->
<template>
  <div class="userInfo" :data="infomation">
    <van-nav-bar title="我的信息" />
    <!-- <van-form validate-first @failed="onFailed">
      通过 pattern 进行正则校验
      <van-field
        v-model="email"
        name="pattern"
        label="邮箱"
        placeholder="请输入邮箱进行验证~"
        :rules="[{ pattern, message: '请输入正确邮箱' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="密码"
        label="密码"
        placeholder="新密码"
        :rules="[{ required: true, message: '请填写新密码' }]"
      />
    </van-form> -->
    <div style="padding:0px 15px;" class="show_part">
      <div style="display:inline-block;" class="detail0">账户：</div>
      <div style="display:inline-block;" class="detail">{{infomation.account}}</div>
    </div>
    <div style="padding:0px 15px;" class="show_part">
      <div style="display:inline-block;" class="detail0">I D：</div>
      <div style="display:inline-block;" class="detail">{{infomation.id}}</div>
    </div>
    <div style="padding:0px 15px;" class="show_part">
      <div style="display:inline-block;" class="detail0">邮箱：</div>
      <div style="display:inline-block;" class="detail">{{infomation.email}}</div>
    </div>
    <div style="padding:0px 15px;" class="show_part" ref="test">
      <div style="display:inline-block;" class="detail0">名字：</div>
      <div style="display:inline-block;" class="detail">{{infomation.name}}</div>
    </div>
    <div style="padding:0px 15px;" class="show_part">
      <div style="display:inline-block;" class="detail0">手机：</div>
      <div style="display:inline-block;" class="detail">{{infomation.phone}}</div>
    </div>
    <div style="padding:0px 15px;text-align:center" class="spc_show_part">
      <button id="logoutbtn" @click="logout">退出登录</button>
    </div>

  </div>
</template>

<script>
import Vue from 'vue'
import axios from 'axios'
Vue.use(axios)
// 请求接口
// import { getUserInfo } from '@/api/user.js'
// import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      email: '',
      password: '',
      infomation:[],
      pattern: /^([a-zA-Z0-9])+(([a-zA-Z0-9])|([._-][a-zA-Z0-9])*)+@([a-zA-Z0-9-])+((\.[a-zA-Z0-9-]{2,3}){1,2})$/
    }
  },
  computed: {
    // ...mapGetters(['userName'])
  },
  mounted() {
    this.confirm_login()
    this.initData()
  },
  methods: {
    // 请求数据案例
    // initData() {
    // 请求接口数据，仅作为展示，需要配置src->config下环境文件
    //   const params = { user: 'sunnie' }
    //   getUserInfo(params)
    //     .then(() => { })
    //     .catch(() => { })
    // },
    // Action 通过 store.dispatch 方法触发
    // doDispatch() {
    //   this.$store.dispatch('setUserName', '真乖，赶紧关注公众号，组织都在等你~')
    // }
    initData() {
      const that = this;
      const token = sessionStorage.getItem('token')
      axios.post('http://39.96.36.251/api/ower/owen',{
        token:token
      })
      .then(function(res){
        that.infomation = res.data.data[0];
      })
      .catch(function(err){
        console.log(err);
      })
    },
    logout() {
      sessionStorage.clear();
      this.$router.replace('/login')
    },
    confirm_login() {
      const token = sessionStorage.getItem('token')
      if(token == null){
        this.$router.replace('/login')
      }
    },
  }
}
</script>
<style scoped>
.show_part {
  height: 60px;
  line-height: 60px;
  border-radius: 5px;
  background-color: rgba(221, 221, 221, 0.563);
  /* border: 0.3px solid rgb(196, 195, 195); */
  box-shadow: 1px 1px 1px rgb(196, 195, 195);
  margin-top: 3px;
}
.detail0 {
  width: 20%;
  text-align: center;
  font-size: 16px;
  font-weight: 550;
  color: rgb(116, 116, 116);
}
.detail {
  width: 80%;
  text-align: center;
  font-size: 14px;
  color: black;
  font-weight: 500;
}
.spc_show_part {
  margin-top: 40px;
}
#logoutbtn {
  background-color: rgba(243, 2, 2, 0.905);
  border: none;
  outline: none;
  color: white;
  padding: 15px 60px;
  border-radius: 10px;
}
</style>
